<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>12表单控件</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
  <form action="#">
<!--    尺寸 -->
    <div class="input-group input-group-lg col-lg-6">
      <span class="input-group-addon" id="sizing-addon1">@</span>
      <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
    </div>

<!--  作为额外元素的单选框和多选框  -->
    <div class="row">
      <div class="col-lg-6">
        <div class="input-group">
          <span class="input-group-addon">
            <input type="checkbox" aria-label="...">
          </span>
          <input type="text" class="form-control" aria-label="...">
        </div><!-- /input-group -->
      </div><!-- /.col-lg-6 -->

      <div class="col-lg-6">
        <div class="input-group">
          <span class="input-group-addon">
            <input type="radio" aria-label="...">
          </span>
          <input type="text" class="form-control" aria-label="...">
        </div><!-- /input-group -->
      </div><!-- /.col-lg-6 -->
    </div><!-- /.row -->


    <div class="row">
      <div class="col-lg-6">
        <div class="input-group">
          <span class="input-group-btn">
            <button class="btn btn-default" type="button">Go!</button>
          </span>
          <input type="text" class="form-control" placeholder="Search for...">
        </div><!-- /input-group -->
      </div><!-- /.col-lg-6 -->
    </div><!-- /.row -->

<!--多按钮组合 -->
    <div class="input-group col-lg-6">
      <div class="input-group-btn">
        <!-- Button and dropdown menu -->
        <button class="btn btn-default" type="button" aria-label="bold">
          <span class="glyphicon glyphicon-bold"></span>
        </button>
        <button class="btn btn-default" type="button" aria-label="italic">
          <span class="glyphicon glyphicon-italic"></span>
        </button>
      </div>

      <input type="text" class="form-control" aria-label="...">
    </div>
  </form>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>